        var CanvasBuffer = 50;
        var PortraitWidth = 100;
        var PortraitColor = "#ffffff";
        var NicknameWidth = 250;
        var NicknameColor = "#bbffbb";
        var TeamWidth = 150;
        var TeamColor = "#bbbbff";        
        var RaceWidth = 100;
        var RaceColor = "#bbffff";
        var RowHeight = 100;
        var NumberofRows = 6;
        var MYAPP = {}
        MYAPP.Correct = [ {"Image" : "1EasyA.jpg",
				 "Nickname" : "1Sheth",
				 "Team" : "1TeamLiquid",
				 "Race" : "1Zerg"},
				 
				 {"Image" : "2EasyB.jpg",
				 "Nickname" : "2IdrA",
				 "Team" : "2Evil Geniuses",
				 "Race" : "2Zerg"},

				 {"Image" : "3EasyC.jpg",
				 "Nickname" : "3BoxeR",
				 "Team" : "3SlayerS",
				 "Race" : "3Terran"},

				 {"Image" : "4EasyD.jpg",
				 "Nickname" : "4Naniwa",
				 "Team" : "4Quantic",
				 "Race" : "4Protoss"},

				 {"Image" : "5EasyE.jpg",
				 "Nickname" : "5Destiny",
				 "Team" : "5Quantic",
				 "Race" : "5Zerg"},

				 {"Image" : "6EasyF.jpg",
				 "Nickname" : "6White-Ra",
				 "Team" : "6TT ESports",
				 "Race" : "6Protoss"}
				];
			MYAPP.Displayed = [{"Image" : "",
				 "Nickname" : "",
				 "Team" : "",
				 "Race" : ""},
				 
				 {"Image" : "",
				 "Nickname" : "",
				 "Team" : "",
				 "Race" : ""},
				 
				 {"Image" : "",
				 "Nickname" : "",
				 "Team" : "",
				 "Race" : ""},
				 
				 {"Image" : "",
				 "Nickname" : "",
				 "Team" : "",
				 "Race" : ""},
				 
				 {"Image" : "",
				 "Nickname" : "",
				 "Team" : "",
				 "Race" : ""},
				 
				 {"Image" : "",
				 "Nickname" : "",
				 "Team" : "",
				 "Race" : ""}];
			
	        MYAPP.randomize = function() {
		        var tempArray = [];

		        // randomize images
		        for (var i = 0; i < MYAPP.Correct.length; i++) {
			     tempArray[i] = MYAPP.Correct[i].Image;
		        }
		        for (var j = 0; j < MYAPP.Correct.length; j++) {
			        var pluck = Math.floor(Math.random() * tempArray.length);
			    	MYAPP.Displayed[j].Image = tempArray[pluck];
			    	tempArray.splice(pluck, 1);
		        }
		        
		        // randomize nicknames
		        for (var i = 0; i < MYAPP.Correct.length; i++) {
			     tempArray[i] = MYAPP.Correct[i].Nickname;
		        }
		        for (var j = 0; j < MYAPP.Correct.length; j++) {
			        var pluck = Math.floor(Math.random() * tempArray.length);
			    	MYAPP.Displayed[j].Nickname = tempArray[pluck];
			    	tempArray.splice(pluck, 1);
		        }
		        
		        // randomize teams
		        for (var i = 0; i < MYAPP.Correct.length; i++) {
			     tempArray[i] = MYAPP.Correct[i].Team;
		        }
		        for (var j = 0; j < MYAPP.Correct.length; j++) {
			        var pluck = Math.floor(Math.random() * tempArray.length);
			    	MYAPP.Displayed[j].Team = tempArray[pluck];
			    	tempArray.splice(pluck, 1);
		        }
		        
		        // randomize races
		        for (var i = 0; i < MYAPP.Correct.length; i++) {
			     tempArray[i] = MYAPP.Correct[i].Race;
		        }
		        for (var j = 0; j < MYAPP.Correct.length; j++) {
			        var pluck = Math.floor(Math.random() * tempArray.length);
			    	MYAPP.Displayed[j].Race = tempArray[pluck];
			    	tempArray.splice(pluck, 1);
		        }		    
	        }
	        
	        MYAPP.getMousePos = function(canvas, evt){
		    	var obj = canvas;
		    	var top = 0;
		    	var left = 0;
		    	while (obj && obj.tagName != 'BODY') {
			    	top += obj.offsetTop;
			    	left += obj.offsetLeft;
			    	obj = obj.offsetParent;	
		    	}
		    	
		    	var mouseX = evt.clientX - left + window.pageXOffset;
		    	var mouseY = evt.clientY - top + window.pageYOffset;
		    	return {
			    	x: mouseX,
			    	y: mouseY
		    	};
	        }
      
        window.onload = function() {
	        
	        MYAPP.randomize();      
	        
    
	        for (var i = 0; i < NumberofRows; i++) {
	        console.log(MYAPP.Displayed[i].Image + " " + MYAPP.Displayed[i].Nickname + " " + MYAPP.Displayed[i].Team + " " + MYAPP.Displayed[i].Race);
	        }
	        
            var stage = new Kinetic.Stage({
                container: "container",
                width: CanvasBuffer*2 + PortraitWidth + NicknameWidth + TeamWidth + RaceWidth,
                height: CanvasBuffer*2 + NumberofRows * RowHeight
            });
            
            var layer = new Kinetic.Layer();

            var canvas = layer.getCanvas();
		    var context = canvas.getContext('2d');

		    // check mouse position during drags to see which cell border to highlight
		    canvas.addEventListener('dragmove', function(evt){
		        var mousePos = MYAPP.getMousePos(canvas, evt);
		    }, false);
		    // check mouse position when drag ends to see which (if any) cell to swap
		    canvas.addEventListener('dragend', function(evt){
		        var mousePos = MYAPP.getMousePos(canvas, evt);
		    }, false);
 
            for(var n = 0; n < NumberofRows; n++) {
                // anonymous function to induce scope
                (function() 
                {
                    var i = n;
	                var group1 = new Kinetic.Group();
	                var group2 = new Kinetic.Group();
	                var group3 = new Kinetic.Group();
	                var group4 = new Kinetic.Group();
	                
	                // column 1 -- player image
                    var box1 = new Kinetic.Rect({
                        x: CanvasBuffer,
                        y: i * RowHeight + CanvasBuffer,
                        fill: PortraitColor,
                        stroke: "black",
                        strokeWidth: 2,
                        width: PortraitWidth,
                        height: RowHeight
                    });
                    var text1 = new Kinetic.Text({
	                  x: CanvasBuffer,
	                  y: i*RowHeight + CanvasBuffer,
	                  text: MYAPP.Displayed[i].Image.slice(1),
	                  textFill: "#888",
	                  fontSize: 15,
	                  fontFamily: 'Calibri'  
                    })
                    group1.add(box1);
                    group1.add(text1);
                    group1.draggable(true);
                    group1.setDragConstraint("vertical");
                    
                    // column 2 -- player nickname
                    var box2 = new Kinetic.Rect({
                        x: CanvasBuffer + PortraitWidth ,
                        y: i * RowHeight + CanvasBuffer,
                        fill: NicknameColor,
                        stroke: "black",
                        strokeWidth: 2,
                        draggable: true,
                        dragConstraint: "vertical",
                        width: NicknameWidth,
                        height: RowHeight
                    });
                    var text2 = new Kinetic.Text({
	                	x: CanvasBuffer + PortraitWidth + NicknameWidth/2,   
                        y: i * RowHeight + CanvasBuffer + RowHeight/2,
                        text: MYAPP.Displayed[i].Nickname.slice(1),
                        align: "center",
                        verticalAlign: "middle",
                        textFill: "#888",
                        fontSize: 15,
                        fontFamily: 'Calibri'  
                    })
                    group2.add(box2);
                    group2.add(text2);
                    group2.draggable(true);
                    group2.setDragConstraint("vertical");
                    
                    // column 3 -- team name
                    var box3 = new Kinetic.Rect({
                        x: CanvasBuffer + PortraitWidth + NicknameWidth,
                        y: i * RowHeight + CanvasBuffer,
                        fill: TeamColor,
                        stroke: "black",
                        strokeWidth: 2,
                        draggable: true,
                        dragConstraint: "vertical",
                        width: TeamWidth,
                        height: RowHeight
                    });
                    var text3 = new Kinetic.Text({
	                	x: CanvasBuffer + PortraitWidth + NicknameWidth + TeamWidth/2,   
                        y: i * RowHeight + CanvasBuffer + RowHeight/2,
                        text: MYAPP.Displayed[i].Team.slice(1),
						align: "center",
                        verticalAlign: "middle",
                        textFill: "#888",
                        fontSize: 15,
                        fontFamily: 'Calibri'  
                    })                    
                    group3.add(box3);
                    group3.add(text3);
                    group3.draggable(true);
                    group3.setDragConstraint("vertical");
                                        
                    // column 4 -- race
                    var box4 = new Kinetic.Rect({
                        x: CanvasBuffer + PortraitWidth + NicknameWidth + TeamWidth,
                        y: i * RowHeight + CanvasBuffer,
                        fill: RaceColor,
                        stroke: "black",
                        strokeWidth: 2,
                        draggable: true,
                        dragConstraint: "vertical",
                        width: RaceWidth,
                        height: RowHeight
                    });
                    var text4 = new Kinetic.Text({
	                	x: CanvasBuffer + PortraitWidth + NicknameWidth + TeamWidth + RaceWidth/2,   
                        y: i * RowHeight + CanvasBuffer + RowHeight/2,
                        text: MYAPP.Displayed[i].Race.slice(1),
                        align: "center",
                        verticalAlign: "middle",
                        textFill: "#888",
                        fontSize: 15,
                        fontFamily: 'Calibri'  
                    })
                    group4.add(box4);
                    group4.add(text4);
                    group4.draggable(true);
                    group4.setDragConstraint("vertical");
                    
                    group1.on("dragstart", function() {
                        group1.moveToTop();
                        layer.draw();
                    });
                    group2.on("dragstart", function() {
                        group2.moveToTop();
                        layer.draw();
                    });
                    group3.on("dragstart", function() {
                        group3.moveToTop();
                        layer.draw();
                    });
                    group4.on("dragstart", function() {
                        group4.moveToTop();
                        layer.draw();
                    });
 
                    group1.on("dragmove", function() {
                        document.body.style.cursor = "pointer";
                    });
                    group2.on("dragmove", function() {
                        document.body.style.cursor = "pointer";
                    });
                    group3.on("dragmove", function() {
                        document.body.style.cursor = "pointer";
                    });
                    group4.on("dragmove", function() {
                        document.body.style.cursor = "pointer";
                    });
 
                    group1.on("mouseover", function() {
                        document.body.style.cursor = "pointer";
                    });
                    group2.on("mouseover", function() {
                        document.body.style.cursor = "pointer";
                    });
                    group3.on("mouseover", function() {
                        document.body.style.cursor = "pointer";
                    });
                    group4.on("mouseover", function() {
                        document.body.style.cursor = "pointer";
                    });
                    
                    group1.on("mouseout", function() {
                        document.body.style.cursor = "default";
                    });
                    group2.on("mouseout", function() {
                        document.body.style.cursor = "default";
                    });
                    group3.on("mouseout", function() {
                        document.body.style.cursor = "default";
                    });
                    group4.on("mouseout", function() {
                        document.body.style.cursor = "default";
                    });
 
                    layer.add(group1);
                    layer.add(group2);
                    layer.add(group3);
                    layer.add(group4);
                })();
            }
 
            stage.add(layer);
        };